{{#if showHeader}}
  <section class="header">
    <div class="pull-left">
      <h1>
        {{t (if istio "catalogPage.istio.header" "catalogPage.index.header")}}
      </h1>
    </div>
    <div class="right-buttons">
      <div class="search-group input-group pull-right ml-20">
        {{input
          value=search
          type="search"
          class="input-sm pull-right"
          placeholder=(t "generic.search")
        }}
        {{#if search}}
          <span class="input-group-btn">
            <button class="btn bg-transparent text-info pl-10 pr-10" type="button" {{action "clearSearch" }}>
              <i class="icon icon-close"></i>
            </button>
          </span>
        {{/if}}
      </div>
      <div class="dropdown filter-group pull-right ml-20">
        <BasicDropdown @horizontalPosition="right" @verticalPosition="below" as |dd|>
          <dd.Trigger class="btn bg-default">
            <span class="text-capitalize">
              {{#if (eq category "")}}
                {{t "catalogPage.index.allCategories"}}
              {{else}}
                {{category}}
              {{/if}}
            </span>
            <i class="icon icon-chevron-down ml-10"></i>
          </dd.Trigger>
          <dd.Content class="text-right">
            <li class="text-capitalize {{if (eq category "") "active"}}" {{action dd.actions.close}}>
              <a href="#" {{action "filterCatalog" "" dd}}>
                {{t "catalogPage.index.allCategories"}}
                (
                {{matchingSearch.length}}
                )
              </a>
            </li>
            {{#each categories as |opt|}}
              <li class="{{if (eq category opt.category) "active"}}" {{action dd.actions.close}}>
                <a href="#" {{action "filterCatalog" opt.category dd}}>
                  <div class="text-capitalize">
                    {{opt.name}}
                    (
                    {{opt.count}}
                    )
                  </div>
                </a>
              </li>
            {{/each}}
          </dd.Content>
        </BasicDropdown>
      </div>
      <div class="pull-right">
        <button type="button" class="btn bg-primary icon-btn" disabled={{eq updating "yes" }} {{action "update" }}>
          {{#if (eq updating "yes")}}
            <i class="icon icon-spinner icon-spin"></i>
          {{else if (eq updating "error")}}
            <i class="icon icon-spinner icon-alert"></i>
          {{else}}
            <i class="icon icon-refresh pr-10"></i>
          {{/if}}
          <span>
            {{t "catalogPage.index.refreshBtn"}}
          </span>
        </button>
      </div>
    </div>
  </section>
{{/if}}
{{#if scope.currentCluster.isWindows}}
  {{banner-message
    icon="icon-info"
    color="bg-warning mb-0 mt-10"
    message=(t "catalogPage.index.windowsWarning" htmlSafe=true)
  }}
{{/if}}
{{#each groupedContent as |group|}}
  <div class="catalog-group">
    <div class="clearfix">
      <button class="btn btn-sm bg-transparent mt-10 pull-right" type="button" {{action "toggleCollapse" group}}>
        {{t (if group.collapsed "generic.expand" "generic.collapse")}}
      </button>
      <p>
        <span class="group-name-container">
          {{group.name}}
          {{#if group.isHelm3}}
            <img class="helm-version-3" src="{{app.baseAssets}}assets/images/logos/helm-v3.svg" />
          {{/if}}
        </span>
      </p>
    </div>
    {{#unless group.collapsed}}
      <div class="clearfix">
        {{#each group.items as |catalogItem|}}
          {{catalog-box model=catalogItem launchAction=(action launch)}}
        {{else}}
          <div class="text-muted mt-20">
            {{t "catalogPage.index.noData.singular"}}
          </div>
        {{/each}}
      </div>
    {{/unless}}
  </div>
{{else}}
  <div class="text-muted mt-20">
    {{t "catalogPage.index.noData.plural"}}
  </div>
{{/each}}
